<template>
  <div v-loading="loading">
    <view-find
      ref="bpmViewRef"
      :xml-data="bpmnXML"
      :activity-map="activityMap"
    />
  </div>
</template>
<script>
import { getBpmnXmlByModelId } from '@/api/bpm/model'
import { getBpmnXmlByDefinitionId } from '@/api/bpm/definition'
import { getBpmViewerActivity } from '@/api/bpm/activity'
import ProcessViewer from '@/components/ProcessViewer/index.vue'
import ViewFind from '@/components/ProcessViewers/index.vue'

export default {
  name: 'ProcessImage',
  components: { ViewFind, ProcessViewer },
  props: {
    modelId: {
      type: String,
      default: null
    },
    processInstanceId: {
      type: String,
      default: null
    },
    processDefinitionId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      bpmnXML: '',
      xml: '',
      map: {},
      activityMap: {},
      // 是否描点
      isHighlight: false

    }
  },
  watch: {
    modelId: {
      immediate: true,
      handler(e) {
        this.$nextTick(() => {
          this.getXmlByModelId()
        })
      }
    },
    processDefinitionId: {
      immediate: true,
      handler(e) {
        this.$nextTick(() => {
          this.getXmlByProcessDefinitionId()
        })
      }
    },
    processInstanceId: {
      immediate: true,
      handler(e) {
        this.$nextTick(() => {
          this.getProcessActivity()
        })
      }
    },
    xml: {
      immediate: true,
      handler(e) {
        if (e) {
          this.$nextTick(() => {
            this.calculate()
          })
        }
      }
    },
    activityMap: {
      immediate: true,
      deep: true,
      handler(e) {
        if (this.isNotEmpty(e)) {
          this.$nextTick(() => {
            this.calculate()
          })
        }
      }
    }

  },

  methods: {
    isNotEmpty(e) {
      return e !== null && e !== undefined && e !== ''
    },
    calculate() {
      // 需要描点
      if (this.processInstanceId) {
        if (this.isNotEmpty(this.activityMap) && this.isNotEmpty(this.xml)) {
          this.bpmnXML = this.xml
          this.loading = false
        }
      } else {
        this.bpmnXML = this.xml
        this.loading = false
      }
    },
    getProcessActivity() {
      if (!this.processInstanceId) return
      this.loading = true
      if (this.isNotEmpty(this.activityMap)) {
        this.activityMap = {}
      }
      getBpmViewerActivity(this.processInstanceId).then(res => {
        this.activityMap = res.data
      })
    },

    getXmlByProcessDefinitionId() {
      if (!this.processDefinitionId) return
      if (this.bpmnXML) {
        this.bpmnXML = ''
        this.xml = ''
      }
      this.loading = true
      getBpmnXmlByDefinitionId(this.processDefinitionId).then(res => {
        // this.loading = false;
        this.xml = res.data
      })
    },

    getXmlByModelId() {
      if (!this.modelId) return
      this.loading = true
      getBpmnXmlByModelId(this.modelId).then(res => {
        this.loading = false
        this.bpmnXML = res.data
      })
    }
  }
}
</script>
